<template>
  <view class="main-admin bg-admin">
    <view class="admin-comm-list">
      <view>
        <view class="item">
          <view class="info title-mid">
           <view class="info-item">
              <view class="title">用户昵称</view>
              <view class="mao">：</view>
              <view class="content" style="color: #2196F3;">{{ ADMIN_NAME }}</view>
            </view>
 
 
            <view class="info-item">
              <view class="title">手机号码</view>
              <view class="mao">：</view>
              <view class="content" @click="dial()">{{ ADMIN_PHONE }}</view>
              <image class="icon-arrow" src="/static/电话.png" mode="scaleToFill" />
            </view>
     
            <view class="info-item">
              <view class="title">注册时间</view>
              <view class="mao">：</view>
              <view class="content">{{ ADMIN_LOGIN_TIME }}</view>
            </view>
          </view>
        </view>
      </view>
 
    </view>
  </view>
 </template>
 
 <script setup>
 import { ref } from 'vue';
 import {
     onLoad
   } from '@dcloudio/uni-app';
   import { 
     adminGetUserById
  } from '@/request/api.js'
 const ADMIN_NAME = ref();
 const ADMIN_PHONE = ref();
 const ADMIN_LOGIN_TIME = ref();
 
 
 const id = ref(null);
 
 // 使用 onLoad 生命周期钩子来获取页面参数
 onLoad(async (e) => {
     adminGetUserById({id:e.id}).then((res) => {
       console.log(res.data.data.nickname)
       console.log(res.data.data.phomenumber)
       console.log(res.data.data.time)
       ADMIN_NAME.value=res.data.data.nickname;
       ADMIN_PHONE.value=res.data.data.phomenumber;
       ADMIN_LOGIN_TIME.value=res.data.data.time;
     });
   });
 
 function dial() {
   console.log(ADMIN_PHONE.value)
   wx.makePhoneCall({
     phoneNumber: ADMIN_PHONE.value,
     success: function () {
       console.log("拨打电话成功！");
     },
     fail: function () {
       console.log("拨打电话失败！");
     }
   });
 }
 </script>
 
 <style scoped>
 .main-admin {
     padding: 30rpx 20rpx;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
     box-sizing: border-box;
     margin-bottom: 100rpx;
     min-height: 100vh;
     background-color: #cecece33;
 }
 .admin-comm-list {
  width: 100%;
  /* padding: 0rpx 20rpx 0rpx; */
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
 }
 .admin-comm-list .item {
  /* width: 100%; */
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: #fff;
  border-radius: 5rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
  position: relative;
  border: 1rpx solid #ccc;
 }
 .admin-comm-list .item .info {
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  background-color: #fff;
  min-height: 150rpx;
  padding: 15rpx 20rpx 30rpx;
  position: relative;
 }
 .admin-comm-list .item .info .info-item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  background-color: #fff;
  line-height: 1.5;
  font-size: 26rpx;
  margin-bottom: 16rpx;
 }
 .admin-comm-list .item .info .info-item .title {
  width: 110rpx;
  color: #333;
  text-align: right;
  font-weight: bold;
 }
 .admin-comm-list .item .info .info-item .mao {
  color: #333;
  text-align: left;
  margin-right: 10rpx;
 }
 .admin-comm-list .item .info .info-item .content {
  flex: 1;
  /* color: #555; */
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
 }
 .icon-arrow {
   width: 15px;
     height: 15px;
     position: relative;
     top: 3px;
     left: -172px;
 }
 
 
 /* 如果你需要确保图片完全适应这个大小，可以添加以下样式 */
 .icon-arrow image {
   width: 100%; /* 图片宽度填满容器 */
   height: 100%; /* 图片高度填满容器 */
   object-fit: cover; /* 保持图片的比例，超出部分将被裁剪 */
 }
 </style>